@import "themes/var";

.el-collapse {
  border: none;

  .el-collapse-item__header {
    height: 40px;
    line-height: 40px;
    color: $collapse-font-color;
    background-color: $collapse-bgcolor;
    border-bottom: 1px solid $collapse-border-color;

    &.focusing:focus:not(:hover) {
      color: $collapse-font-color;
    }
  }

  .el-collapse-item__arrow {
    font-size: 12px;
    color: $field-collapse-arrow-color;
  }

  .el-collapse-item.is-disabled .el-collapse-item__header {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .el-collapse-item__wrap {
    background-color: $collapse-bgcolor;
    border-bottom: none;
  }

  .el-collapse-item__content {
    color: $collapse-font-color;
  }

  &.collapse-arrow-left {
    .el-collapse-item__header {
      flex-direction: row-reverse;
      justify-content: flex-end;
    }

    .el-collapse-item__arrow {
      margin: 0 8px 0 0;
    }
  }
}

.g-field-collapse {
  margin-bottom: 5px;
  border: none;

  .el-collapse-item__header {
    height: 40px;
    padding-left: 8px;
    font-size: $font-size;
    line-height: 40px;
    color: #fff;
    background: $field-collapse-header-bgcolor;
    border-bottom-color: $field-border-color;
  }

  .el-collapse-item__wrap {
    padding: 0;
    // padding-right: 8px;
    background-color: $field-collapse-item-bgcolor;
    border-bottom-color: $field-border-color;
  }

  .el-collapse-item__content {
    padding: 0;
  }
}

.el-collapse-item__content {
  .g-field-collapse {
    margin-bottom: 1px;

    .g-field-title {
      color: $gui-font-color-3;
    }

    .el-collapse-item__header {
      color: $gui-font-color-2;
      background-color: $field-collapse-item-bgcolor;

      .g-field-title,
      .g-field-title-with-description {
        color: $gui-font-color-2;
      }
    }
  }
}
